<template>
  <div>
    <div class="top">
      <van-icon @click="goback" class="zuo" name="arrow-left" />
      我的
      <van-icon class="you" name="setting" @click="zhu"/>
      <!-- <span class="you" @click="zhu()">注销</span> -->
    </div>
    <div class="main">
      <p class="img">
        <img src="https://plogin.m.jd.com/static/img/jd-logo-new.caee09f.png" />
      </p>
      <span @click="goreg">{{ msg }}</span>
      <van-grid class="my">
        <van-grid-item icon="peer-pay" text="待付款" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="thumb-circle-o" text="待评价" />
        <van-grid-item icon="records" text="全部订单"  @click="gobug"/>
      </van-grid>
      <van-cell is-link @click="goAddresslist">地址管理</van-cell>
      <van-cell is-link>收藏</van-cell>
      <van-cell is-link>关于</van-cell>
      <p class="out">
        <img
          src="http://pro.statics.logoqs.techuangyi.com/2019/10/25/a15f2c299393995cc4082a5d232a0ad4.png?x-oss-process=image/resize,m_fill,w_312,h_175"
        />
      </p>
    </div>
  </div>
</template>

<script>
// import { Dialog } from 'vant';
import {user} from '../api/my'
export default {
  name: "My",
  data() {
    return {
      show: false,
      msg: "点击登录",
    };
  },
  methods: {
    gobug(){
      this.$router.push("/bug");
    },
    goAddresslist(){
      this.$router.push("/addresslist")
    },
    goreg() {
      this.$router.push("/Login");
    },
    goback() {
      this.$router.back();
    },
    zhu() {
       this.$router.push("/set");
      // Dialog.confirm({
      //   title: "退出登录",
      //   message: "是否确认退出？",
      // })
      //   .then(() => {
      //     // on confirm
      //     localStorage.removeItem("token");
      //     location.reload();
      //   })
      //   .catch(() => {
      //     // on cancel
      //       console.log("取消")
      //   });
      // localStorage.removeItem("tel");
      // localStorage.removeItem("username");
      // this.msg = "点击登录";
      // this.username = "";
    },
  },
  created() {
    user({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res.data);
      let data = res.data;
      if (data.code == 200) {
        data.data[0].username == ""? (this.msg = data.data[0].tel): (this.msg = data.data[0].username);
      }
    });
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid black;
  position: relative;
}
.zuo {
  position: absolute;
  left: 10px;
  font-size: 20px;
  top: 15px;
}
.you {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 20px;
}
img {
  width: 100%;
  height: 100%;
}
.img {
  border: 1px solid bisque;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  overflow: hidden;
  text-align: center;
}
.main {
  height:552px;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* justify-content:space-around; */
  align-items: center;
  margin-top: 20px;
}
.out {
  width: 100px;
  height: 60px;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
}
.my {
  width: 100%;
}
</style>
